<template>
  <div class="Count">
    <div>总价值: {{ $store.getters.getterCount }}</div>
    <div>总价值: {{ $store.getters.totalGreen(9)}}</div>
    <div class="name">{{ $store.getters.nameInfo }}</div>
    <div class="age">{{ $store.getters.ageInfo }}</div>
    <div class="height">{{ $store.getters.heightInfo }}</div>
    <div class="name">{{ nameInfo1 }}</div>
    <h1>辅助函数(mapGetters)通过数组去实现的功能</h1>
    <div class="name">{{ nameInfo }}</div>
    <div class="age">{{ ageInfo }}</div>
    <div class="height" v-text="heightInfo"></div>
    <h2>辅助函数(mapGetters)通过对象实现的功能</h2>
    <div class="name">{{ name1 }}</div>
    <div class="age">{{ age1 }}</div>
    <div class="height" v-text="height1"></div>
  </div>
  <hr>
  <vue3Count></vue3Count>
</template>

<script>
import { mapGetters } from 'vuex'
import vue3Count from './vue3Count'
export default {
  components: {
    vue3Count
  },
  computed: {
    nameInfo1 () {
      return this.$store.getters.nameInfo
    },
    ...mapGetters(['nameInfo', 'ageInfo', 'heightInfo']),
    // mapGetters通过对象来实现
    ...mapGetters({
      name1: 'nameInfo',
      age1: 'ageInfo',
      height1: 'heightInfo'
    })
  }
}
</script>
<style scoped>

</style>
